<template>
  <div>
    <!-- 表格和分页部分 -->
    <el-row class="mt-10">
      <el-col :span="24">
        <el-card>
          <el-row>
            <el-col :span="24">
              <!-- 新增按钮 -->
              <el-button type="success" @click="handleDialog">新增</el-button>
            </el-col>
          </el-row>
          <!-- 定义表格，data 绑定的是列表数据，border 表示有边框 -->
          <!-- selection-change 事件表示用户勾选的状态改变 -->
          <el-table :data="pageData" border class="mt-10">
            <!-- 定义表格列，type 表示列类型，selection 表示多选框 -->
            <el-table-column type="selection" width="55"></el-table-column>
            <!-- 定义表格列，prop 对应列内容的字段名， label 表示表头名称，width 可以控制度 -->
            <el-table-column prop="id" label="编号"></el-table-column>
            <el-table-column prop="imgUrl" label="轮播图">
              <template slot-scope="scope">
                <el-image :src="scope.row.imgUrl"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型">
              <template slot-scope="scope">
                <span v-if="scope.row.type === 1">首页</span>
                <span v-if="scope.row.type === 2">分类商品页</span>
              </template>
            </el-table-column>
            <el-table-column prop="enabled" label="是否可用">
              <template slot-scope="scope">
                <span v-if="scope.row.enabled === 0">可用</span>
                <span v-if="scope.row.enabled === 1">不可用</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <!-- 添加对话框 -->
    <el-dialog title="新增" :visible.sync="dialogFormVisible">
      <el-form :model="dataForm">
        <!-- 在组件上绑定ref，在提交成功后的方法里调用this.$refs.upload.clearFiles();就可以清除原来上传的文件 -->
        <el-form-item label="图片地址" :label-width="formLabelWidth">
          <el-upload
            ref="upload"
            action="/uni/wxUser/file"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="imageSuccess"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="图片链接地址" :label-width="formLabelWidth">
          <el-input
            v-model="dataForm.bannerItem.hrefUrl"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-radio-group v-model="dataForm.bannerItem.type">
            <el-radio :label="1">首页</el-radio>
            <el-radio :label="2">分类商品页</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否可用" :label-width="formLabelWidth">
          <el-radio-group v-model="dataForm.bannerItem.enabled">
            <el-radio :label="0">可用</el-radio>
            <el-radio :label="1">不可用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="doAdd">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 图片对话框 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import qs from "qs";
export default {
  created() {
    //组件加载初始化
    this.getList();
  },
  methods: {
    getList() {
      //得到表单数据
      this.$axios.post("/uni/home/banner?opr=list&type=1").then((res) => {
        console.log(res);
        this.pageData = res.data.result;
      });
    },
    //添加提交触发事件
    doAdd() {
      let bodyData = qs.parse(qs.stringify(this.dataForm));
      this.$axios.post("/uni/home/banner?opr=insert", bodyData).then((res) => {
        if (res.data.code === 200) {
          this.$message.success(res.data.msg);
          this.dialogFormVisible = false;
          this.getList();
        } else {
          this.$message.error(res.data.msg);
        }
      });
      this.$refs.upload.clearFiles();
    },

    //打开图片上传窗口
    handleDialog() {
      this.dataForm.bannerItem.imgUrl = "";
      this.dataForm.bannerItem.hrefUrl = "";
      this.dataForm.bannerItem.type = "";
      this.dataForm.bannerItem.enabled = "";
      this.dialogFormVisible = true;
    },
    //图片取消
    handleCancel() {
      //清空组件的内容
      this.$refs.upload.clearFiles();
      this.dialogFormVisible = false;
    },
    //删除图片
    handleRemove(file, fileList) {
      //this.fileList = fileList;
    },

    //图片预览
    handlePictureCardPreview(file) {
      //this.img = file.url;
      this.dialogVisible = true;
    },
    // 图片上传成功回调函数
    imageSuccess(response, file, fileList) {
      this.dataForm.bannerItem.imgUrl = response.saveFileName;
    },
  },

  data() {
    return {
      // 根据后端返回数据定义表格和分页的数据
      pageData: [],
      //定义添加窗口是否显示变量
      dialogFormVisible: false,
      //定义附件窗口是否显示变量
      dialogVisible: false,
      //input 宽度
      formLabelWidth: "120px",
      //添加表单的form
      dataForm: {
        bannerItem: {
          imgUrl: "",
          hrefUrl: "",
          type: "",
          enabled: "",
        },
      },
      // 用于存储上传的文件列表
      //fileList: [],
    };
  },
};
</script>
<style>
.mt-10 {
  margin-top: 10px;
}

.el-tooltip__popper {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
